<template>
	<view class="box">
		<view>
			<view>长沙优作农业科技有限公司</view>
			<view>9143010206220974XH</view>
			<view>地址:湖南省长沙市芙蓉区东湖街道合平小区C-01栋一单元西门四楼</view>
			<view>电话:073184690622</view>
		</view>
		<view style="margin: 40rpx 0">
			<view>公账基本户</view>
			<view style="font-weight: bold">18035801040004608</view>
			<view style="font-weight: bold; font-size: 16px">中国农业银行股份有限公司长沙马坡岭支行</view>
		</view>
		<uni-section title="只选择图片" type="line">
			<view class="section_view">
				<uni-file-picker limit="9" v-model="imageValue" @select="select"></uni-file-picker>
				<span class="section_view_span">请上传支付凭证截图</span>
			</view>
		</uni-section>
		<view class="view_box">
			金额：
			<input type="number" v-model="amount" placeholder="请输入凭证支付金额" />
		</view>
		<button class="button_box" @click="confirmPayment">确认支付</button>
	</view>
</template>

<script>
import { HTTP_ADMIN_URL } from '@/config/app.js';
import store from '@/store/index.js';
import { TOKENNAME } from '@/config/app.js';

export default {
	data() {
		return {
			preOrderNo: null,
			amount: null,
			imageValue: []
		};
	},
	onLoad(options) {
		this.preOrderNo = options.preOrderNo || null;
	},
	methods: {
		// 获取上传状态
		select(e) {
			const tempFilePaths = e.tempFilePaths;
			const imgUrl = tempFilePaths[0];
			uni.uploadFile({
				url: HTTP_ADMIN_URL + '/api/admin/upload/image?model=product&pid=1',
				filePath: imgUrl,
				name: 'multipart',
				header: {
					'Content-Type': 'multipart/form-data',
					[TOKENNAME]: store.state.app.token
				},
				success: (uploadFileRes) => {
					let path = JSON.parse(uploadFileRes.data).data;
					//后端返回的地址，存入图片地址
					this.imageValue.push({
						url: path.url
					});
				}
			});
		},
		/**
		 * 确认支付
		 * */
		confirmPayment() {
			uni.redirectTo({
				url: `/pages/users/order_confirm/index?preOrderNo=${this.preOrderNo}&amount=${this.amount}&imageValue=${encodeURIComponent(JSON.stringify(this.imageValue))}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.box {
	padding: 40rpx;
	background-color: #fff;
	height: 100vh;

	.section_view {
		position: relative;

		.section_view_span {
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}

	.view_box {
		display: flex;
		align-items: center;
		background-color: #f0f2f5;
		border: 1px solid #dcdfe6;
		border-radius: 5px;
		padding: 20rpx 40rpx;
		margin-top: 40rpx;
	}

	.button_box {
		position: fixed;
		bottom: 50rpx;
		width: 90%;
		padding: 20rpx 0;
		background-color: #49e23f;
		color: #fff;
	}
}
</style>
